<template>
    <s-layout title="云跑活动" :bgStyle="{ color: '#f2f2f2' }">
        <view class="content">
            <view class="text-area">
                <view class="top">
                </view>
                <!-- 打卡记录 -->
                <view class="record">
                    <view class="title">本月{{ punchCard ? '已' : '未' }}提交</view>
                    <view class="hint">每月初开始提交，每月可提交1次，提交累计达12次，可获取奖励</view>
                    <view class="monthBox">
                        <view class="schedule" v-for="(item, index) in list" :key="index"
                            :style="{ background: item.selected ? '#ed7f49' : '#fafafa', color: item.selected ? '#fff' : '#ed7f49' }">
                            <view class="time">{{ item.month }}</view>
                            <view class="statusicon">
                                <image :src="item.selected ? finish : iconImg" mode=""></image>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 打卡享礼卷 -->
                <view class="task">
                    <view class="title">提交运动记录，赢取奖励</view>
                    <view class="task_select">
                        <image src="../../static/img/activity/nav2.png" mode=""></image>
                        <view class="headline">提交方式 2选1</view>
                        <!-- 照片打卡 -->
                        <view class="photo">
                            <view class="left">
                                <view class="iconBox">
                                    <image class="Sicon" src="../../static/img/activity/photo.png" mode=""></image>
                                    <view>图片资料</view>
                                </view>
                                <view class="text">
                                    可提交1张图片，图片内容需有记录日期和跑步距离，可使用KEEP、悦跑圈等运动软件记录日期和运动距离制作图片上传提交，图片最大不大于2M，图例可参考活动详情</view>
                            </view>
                            <view class="right"
                                :style="{ 'background': punchCard ? '#ccc' : 'linear-gradient(to right, #eb6a33, #e73f2f)' }"
                                @tap="getUpload(1)">{{ punchCard ? '已提交' : '待提交' }}</view>
                        </view>
                        <!-- 视频打卡 -->
                        <view class="video">
                            <view class="left">
                                <view class="iconBox">
                                    <image class="Sicon" src="../../static/img/activity/video.png" mode=""></image>
                                    <view>视频资料</view>
                                </view>
                                <view class="text">
                                    可提交1个视频，视频内容需有记录日期和跑步距离，可使用KEEP、悦跑圈等运动软件记录日期和运动距离制作视频上传提交，视频最大不大于30M，图例可参考活动详情
                                </view>
                            </view>
                            <view class="right"
                                :style="{ 'background': punchCard ? '#ccc' : 'linear-gradient(to right, #eb6a33, #e73f2f)' }"
                                @tap="getUpload(2)">{{ punchCard ? '已提交' : '待提交' }}</view>
                        </view>
                    </view>
                </view>
                <uni-collapse>
                    <uni-collapse-item title="活动详细">
                        <view class="collapse-box2" v-html="`${textConten}`"></view>
                    </uni-collapse-item>
                </uni-collapse>
                <view class="button-container">
                    <button v-if="this.selectedNumber >= this.minCount  && this.is_submit != 1" @click="clickcheckin()"
                        class="contentShare">提交</button>
						<button v-if="this.selectedNumber < this.minCount" 
						    class="contentShare_gray">提交<span style="font-size:20rpx;">（完成次数才可提交）</span></button>
                    <button v-if="this.is_submit == 1 && this.is_coupon == 2" class="contentShare">审核中</button>
					<button v-if="this.is_submit==1 && this.is_coupon == 1" class="contentShare_gray">已完成</button>
					
                </view>
            </view>
        </view>
    </s-layout>
</template>

<script>
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import _ from 'lodash';

const state = reactive({
    checkinid: '',
    eventid: ''
});

const allowedPayment = computed(() => {
    console.log(state.checkinid);
});

export default {
    data() {
        return {
            textConten: "",
            is_submit: 0,
			 is_coupon: 0,
            monthVal: 3,
            rollV: "xx",
            finish: "/static/img/activity/accomplish.png",
            iconImg: "/static/img/activity/photo1.png",
            id: '',
            punchCard: false,
            minCount: 36,
            selectedNumber: 0,
            list: ''
        }
    },
    onLoad(options) {

        // console.log(options)
        state.checkinid = options.checkinid
        state.eventid = options.eventid
        this.getData()
        this.getDetailData()
        // this.getLocation()
        this.id = JSON.parse(uni.getStorageSync('user-store')).userInfo.id
        this.monthVal = new Date().getMonth() + 1
    },
    methods: {
        getUpload(checkin_type) {
            let that = this
            if (!this.punchCard) {
                if (checkin_type == 1) {
                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album'], //从相册选择
                        success: function (res) {
                            that.getUploadResult(checkin_type, res.tempFilePaths[0])
                        }
                    });
                } else {
                    uni.chooseVideo({
                        sourceType: ['camera', 'album'],
                        success: function (res) {
                            that.getUploadResult(checkin_type, res.tempFilePath)
                        }
                    });
                }
            }
        },
        async getData() {
            const res = await uni.request({
                url: 'https://www.paopaomala.top/index.php/addons/shopro/user.user/checkin?checkinid=' + state.checkinid,
                header: {
                    token: uni.getStorageSync('token')
                },
                method: 'GET'
            })
            if (res.data.code == 1) {
                this.list = res.data.data;
                this.punchCard = res.data.data[0].currentSelected
                this.minCount = res.data.data[0].minCount
                this.selectedNumber = res.data.data[0].selectedNumber
                this.is_submit = res.data.data[0].is_submit
				this.is_coupon = res.data.data[0].is_coupon

                this.$forceUpdate()
            } else {
                uni.showToast({
                    title: '请求错误',
                    duration: 2000
                })
            }

        },
        async getDetailData() {
            let { code, data } = await sheep.$api.game.checkindetail(state.checkinid);
            if (code) {
                this.textConten = data.extdatacontent;
            }

        },
        async getUploadResult(checkin_type, file) {
            const res = await uni.uploadFile({
                url: 'https://www.paopaomala.top/index.php/api/Index/upload', //仅为示例，非真实的接口地址
                filePath: file,
                name: 'file',
                formData: {
                    checkin_type,
                    userid: this.id,
                    checkinid: state.checkinid,
                    eventid: state.eventid
                }
            });
            if (JSON.parse(res.data).code === 1) {
                uni.showToast({
                    title: '上传成功',
                    duration: 2000
                })
                this.getData()
            } else {
                uni.showToast({
                    title: '请求错误',
                    duration: 2000
                })
            }
        },
        async clickcheckin() {
			
			if(this.selectedNumber < this.minCount)
			{
				uni.showToast({
				    title: '未满足活动要求，不能提交',
					icon:'error',
				    duration: 2000
				})
				return;
				
			}
            await sheep.$api.game.clickcheckin(state.checkinid);
            uni.showToast({
                title: '提交成功',
                duration: 2000
            })

            await this.getData();

        }
    }
}
</script>

<style>
page {
    min-height: 100vh;
}

.content {
    width: 100vw;
    min-height: 100vh;
    background: #f4f4f4;
    overflow: hidden;
    padding-bottom: 50rpx;
}

.text-area {
    width: 690rpx;
    min-height: 100vh;
    margin: 0 auto;
    padding: 20rpx 0 0;
}

.text-area .top {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.text-area .top .left {
    width: 280rpx;
    height: 110rpx;
    border-radius: 55rpx;
    background: linear-gradient(#faf3ed, #f7e6d7);
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #333333;
}

.text-area .top .valBox {
    text-align: center;
    margin-left: 10rpx;
}

.text-area .top .left .val {
    font-weight: bold;
}

.text-area .top .left image {
    display: block;
    width: 130rpx;
    height: 130rpx;
}

.text-area .top .right image {
    display: block;
    width: 580rpx;
    height: 440rpx;
    position: absolute;
    right: -220rpx;
}

/* 打卡记录 */
.record {
    /*height: 390rpx;*/
    border-radius: 20rpx;
    background-color: #fff;
    /*margin-top: 80rpx;*/
    position: relative;
    z-index: 2;
    padding: 20rpx;
}

.record .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #1a1919;
    padding: 20rpx 0 0;
}

.record .hint {
    font-size: 20rpx;
    color: #999999;
    font-weight: 400;
    margin: 10rpx 0;
}

.monthBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    display: grid;
    grid-template-columns: repeat(6, auto);
}

.monthBox .schedule {
    width: 100rpx;
    height: 110rpx;
    border-radius: 8rpx;
    background-color: #fafafa;
    margin-top: 10rpx;
    text-align: center;
    font-size: 24rpx;
    padding: 10rpx 0;
}

.monthBox .schedule .statusicon {
    display: flex;
    justify-content: center;
}

.statusicon image {
    max-width: 60rpx;
    height: 55rpx;
    display: block;
    margin-top: 10rpx;
}

/* 打卡享礼卷 */
.task {
    width: 690rpx;
    margin: 0 auto 30rpx;
}

.task .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #1a1919;
    margin: 30rpx 0;
    padding: 0 20rpx;
}

.task_select {
    padding: 0 10rpx;
    position: relative;
    background-color: #fff;
    border-radius: 20rpx;
}

.task_select image {
    position: absolute;
    display: block;
    width: 280rpx;
    height: 50rpx;
    top: 0;
    margin-left: 205rpx;
}

.headline {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    color: #1a1919;
    position: relative;
    z-index: 2;
    padding: 4rpx 0;
}

.photo,
.video {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 10rpx;
}

.photo {
    border-bottom: 1rpx solid #f4f4f4;
}

.photo .iconBox,
.video .iconBox {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    color: #1a1919;
}

.photo .iconBox .Sicon,
.video .iconBox .Sicon {
    position: relative;
    display: block;
    width: 36rpx;
    height: 30rpx;
    margin: 10rpx;
}

.photo .left .text,
.video .left .text {
    width: 450rpx;
    font-size: 20rpx;
    color: #999999;
}

.photo .right,
.video .right {
    font-size: 24rpx;
    color: #fff;
    width: 150rpx;
    text-align: center;
    line-height: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
    background: linear-gradient(to right, #eb6a33, #e73f2f);
}

.contentShare {
    color: #fff;
    background: linear-gradient(to right, #eb6a33, #e73f2f);
}
.contentShare_gray {
   color: #fff;
   background: linear-gradient(to right, #9E9E9E, #9E9E9E);
}
  
.collapse-box2 {
    padding: 10rpx 20rpx;
    line-height: 180%;
}

.button-container {
    margin-top: 30rpx;
}
</style>